import React, { Component, PropTypes } from 'react';
import { StyleSheet, Image, TouchableOpacity } from 'react-native';
import PxToDp from '../../../utils/PxToDp';

class CommucationSeat extends Component {
  static propTypes = {
    top: PropTypes.number,
    left: PropTypes.number,
  };

  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    const image = this.props.ifActive ? require('../../../img/online/seat_selected.png') : require('../../../img/online/seat.png');
    const borderWidth = this.props.ifActive ? 0 : PxToDp(2);
    const backgroundColor = this.props.ifActive ? '#458fff' : 'transparent';

    return (
      <TouchableOpacity
        activeOpacity={0.75}
        style={
        [
          styles.communicationSeat,
          styles.center,
          {
            top: PxToDp(this.props.top),
            left: PxToDp(this.props.left),
            borderWidth,
            backgroundColor,
          },
        ]
        }
        onPress={() => this.props.onPress()}
      >
        <Image
          source={image}
        />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  communicationSeat: {
    position: 'absolute',
    backgroundColor: 'transparent',
    height: PxToDp(23.8),
    width: PxToDp(23.8),
    borderRadius: PxToDp(15),
    borderColor: '#458fff',
  },

});

export default CommucationSeat;
